<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
        <style>
            body{
                text-align: center;
            }
            table{
                margin: auto;
                width: 300px;
                height: 180px;
                border: 1px solid gray;
                background-image: url("https://cdn.pixabay.com/photo/2017/12/11/18/13/christmas-3012862__340.jpg");
                background-repeat: no-repeat;
                background-size: 300px 180px;
            }
            td{
                font-size: 14px;
                text-align: center;
            }
            a:hover{
                border: dashed orange;
            }
        </style>
		<!--
			1. 表格有四行两列，第一行和第四行跨2列，第一列占30%的宽度，
			    第一行是标题th，第四行是放按钮。使用图片按钮
			2. table居中,宽300px，高180px; 边框solid 1px gray
			3. td的文字对齐居中，字体大小14px
			4. table添加背景，不平铺，图片背景的宽度和高度与table的宽和高一样。
			5. 用户名和密码文本框使用类样式，也可以使用其它选择器。宽150px，高32px，边框用实线，圆角5px，1个宽度，黑色
			6. 使用伪类样式，当鼠标移动到文本框上的时候，变成虚线橙色边框。得到焦点，背景色变成浅黄色
			7. 文本框前面有头像，密码框前面有键盘，左内边距35
		-->
	</head>
	<body>
    <form action="#">
        <table>
            <tr>
                <th colspan="2" width="30%">
                    黑马旅游注册
                </th>
            </tr>
            <tr>
                <td align="right">用户名：</td>
                <td>
                    <a href=""><input type="text" name="userName" id="username" placeholder="请输入用户名"></a>
                </td>
            </tr>
            <tr>
                <td align="right">密码</td>
                <td>
                    <a href=""><input type="password" name="password" id="password" placeholder="请输入密码"></a>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="button" value="立即注册">
                </td>
            </tr>
        </table>
    </form>
	</body>
</html>